<template>
  <div style="padding: 10px;background-color: #f6f5f5">
    <!--标题-->
    <div style="margin: 10px 0">
      <div><h3 style="text-align: center">进度详情</h3></div>
    </div>
    <br>
    <!-- 页面内容 -->
    <div style="width: 100%;margin: auto">
      <el-container style="flex: 1;"
                    >
        <!--   文章部分 -->
        <el-main class="el-main">
          <ul>
            <ProgressContent :id="a.year_week" v-for="a in p_content" :key="a.id" v-bind="a" style="padding-bottom: 20px" />
          </ul>
        </el-main>
        <div>
          <!-- 成员统计数据 -->
          <el-card :body-style="{ padding: '8px 18px' }" style="border: 1px solid #ebeef5">
            <div slot="header" class="me-tag-header">
              <span>{{ member.name }}</span>
            </div>
            <ul class="me-tag-list" style="width: 200px">
              <span class="me-tag-item">
                组别：
                <span>{{ member.group }}</span>
              </span>
                      <span class="me-tag-item">
                详细分组：
                <span>{{ member.group_detail }}</span>
              </span>
                      <span class="me-tag-item">
                总请假次数：
                <span>{{ member.ask_for_leave_all }}</span>
              </span>
            </ul>
          </el-card>
        </div>
      </el-container>
    </div>
  </div>
</template>

<script>

import ProgressContent from "@/components/progress/progressContent";
import {Timer,} from '@element-plus/icons'
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
  name: "ProgressView",
  components:{
    ProgressContent,
    Timer
  },
  data() {
    return{
      member:{},
      bool_work:true,
      bool_overwork:true,
      p_content:[],
    }
  },
  created() {
    this.load()
  },
  methods:{
    // 1
    load() {
      request.get("/progress/progress_data_byId",{
        params:{
          url:"/member",
          // 获取 任务id
          id:this.$route.path.substring(10),
          select: "progress(id,bool_work,bool_overwork,grasp,progress_content," +
                  "member_progress(year_week,ask_for_leave))",
        }
      }).then(res => {
        if (res.code === "400") {
          ElMessage.warning('暂无数据')
        }else if (res.code === "200") {
          this.p_content = res.data.reverse();
        }
        else {
          ElMessage.error('查询失败：'+res.msg)
        }
      })
      request.get("/progress/progress_member_byId",{
        params:{
          url:"/member",
          // 获取 任务id
          id:this.$route.path.substring(10),
          select:"name,group,group_detail,ask_for_leave_all"
        }
      }).then(res => {
        if (res.code == "400") {
          ElMessage.warning('暂无数据')
        }else if (res.code == "200") {
          this.member = res.data
        }
        else {
          ElMessage.error('查询失败：'+res.msg)
        }
      })
    },
  },

}
</script>

<style scoped>
.el-container {
  width: 1080px;
  display: flex;
  margin: 30px auto 140px;
}

.el-main {
  flex: 1;
  padding: 0px;
  line-height: 16px;
}

.me-tag-header {
  font-weight: 600;
  font-size: 22px;
}

.me-tag-more {
  font-size: 14px;
  color: #78b6f7;
}

.me-tag-list {
  list-style-type: none;
}

.me-tag-item {
  display: inline-block;
  padding: 6px;
  font-size: 18px;
}

.me-tag-item a:hover {
  text-decoration: underline;
}
</style>